import { onMounted, reactive, ref, watch, createVNode } from 'vue'
import { checkIdCard, checkPhone, chenkInteger } from '@/utils/check'
import { mortgageMonthList, paymentMethodList, periodMonthList, relationshipList, waningMoonList } from '@/utils'
import { certificationType } from '@/utils/charter-contract'
export const columnList = reactive([
	{
		title: '',
		minWidth: 30,
		fixed: 'left',
		align: 'left',
		type: 'index',
		visible: true,
		slots: {
			default: 'idxNo'
		}
	},
	{
		title: '校验状态',
		// width: 100,
		align: 'left',
		slots: {
			default: 'validate'
		},
		visible: true,
		field: 'validate',

		fixed: 'left',
		minWidth: 200
	},
	{
		title: '房间编号',
		// width: 100,
		align: 'left',
		slots: {
			default: 'houseId'
		},
		visible: true,
		field: 'houseId',

		minWidth: 100
	},
	{
		title: '房源地址',
		// width: 100,
		align: 'left',
		slots: {
			default: 'houseAddress'
		},
		visible: true,
		field: 'houseAddress',

		fixed: 'left',
		minWidth: 250
	},

	{
		title: '承租人姓名',
		align: 'left',
		slots: {
			default: 'input'
		},
		visible: true,
		field: 'name',
		required: true,
		inside: 'renterInfo',
		minWidth: 150
	},
	{
		title: '承租人手机号',
		align: 'left',
		slots: {
			default: 'input'
		},
		visible: true,
		required: true,
		field: 'phone',
		rule: (row, field) => checkPhone.test(row[field] || ''),
		inside: 'renterInfo',

		minWidth: 150
	},
	{
		title: '承租人证件类型',
		align: 'left',
		slots: {
			default: 'selector'
		},
		visible: true,
		field: 'certificationType',
		required: true,
		inside: 'renterInfo',

		minWidth: 150
	},
	{
		title: '承租人证件号',
		align: 'left',
		slots: {
			default: 'input'
		},
		visible: true,
		required: true,
		field: 'identityCard',
		inside: 'renterInfo',
		rule: (row) => row.certificationType === 1 ? checkIdCard(row.identityCard || '') : !!row.identityCard,
		minWidth: 150
	},
	{
		title: '紧急联系人关系',
		align: 'left',
		slots: {
			default: 'selector'
		},
		visible: true,
		inside: 'renterInfo',
		field: 'emergencyType',
		minWidth: 150
	},
	{
		title: '紧急联系人姓名',
		align: 'left',
		slots: {
			default: 'input'
		},
		visible: true,
		field: 'emergencyName',
		inside: 'renterInfo',

		minWidth: 150
	},
	{
		title: '紧急联系人手机号',
		align: 'left',
		slots: {
			default: 'input'
		},
		visible: true,
		inside: 'renterInfo',
		field: 'emergencyPhone',

		minWidth: 150
	},
	{
		title: '同住人',
		align: 'left',
		slots: {
			default: 'togetherList'
		},
		visible: true,
		field: 'togetherList',
		inside: 'renterInfo',

		minWidth: 150
	},
	{
		title: '合同编号',
		align: 'left',
		slots: {
			default: 'input'
		},
		visible: true,
		field: 'contractNo',

		minWidth: 150
	},
	{
		title: '合同周期',
		align: 'left',
		slots: {
			default: 'datepicker'
		},
		visible: true,
		required: true,
		field: 'contractRange',

		minWidth: 250
	},
	// {
	// 	title: '免租天数',
	// 	align: 'left',
	// 	slots: {
	// 		default: 'rentFreeDay'
	// 	},
	// 	visible: true,
	// 	field: 'rentFreeDay',

	// 	minWidth: 250
	// },
	// {
	// 	title: '免租周期', //
	// 	align: 'left',
	// 	slots: {
	// 		default: 'freeRange'
	// 	},
	// 	visible: true,
	// 	field: 'freeRange',

	// 	minWidth: 250
	// },
	{
		title: '押金方式',
		align: 'left',
		slots: {
			default: 'selector'
		},
		visible: true,
		required: true,
		field: 'depositMonth',

		minWidth: 150
	},
	{
		title: '付款方式',
		align: 'left',
		slots: {
			default: 'selector'
		},
		visible: true,
		required: true,
		field: 'periodMonth',

		minWidth: 150
	},
	{
		title: '月租金',
		align: 'left',
		slots: {
			default: 'inputNumber'
		},
		required: true,
		visible: true,
		field: 'price',

		minWidth: 150
	},

	{
		title: '押金',
		align: 'left',
		slots: {
			default: 'inputNumber'
		},
		visible: true,
		required: true,
		field: 'deposit',

		minWidth: 150
	},
	{
		title: '收租日设置',
		align: 'left',
		slots: {
			default: 'selector'
		},
		visible: true,
		required: true,
		field: 'payPattern',

		minWidth: 250
	},
	{
		title: 'N',
		align: 'left',
		slots: {
			default: 'selector'
		},
		required: true,
		rule: (row) => row.payPatternValue >= 0,
		visible: true,
		field: 'payPatternValue',

		minWidth: 150
	},
	{
		title: '账单生成规则',
		align: 'left',
		slots: {
			default: 'selector'
		},
		visible: true,
		required: true,
		field: 'cycleType',

		minWidth: 150
	},
	// {
	// 	title: "活动优惠",
	// 	align: "left",
	// 	slots: {
	// 		default: "event",
	// 	},
	// 	visible: true,
	// 	field: "event",

	// 	minWidth: 150,
	// },
	{
		title: '加收费用',
		align: 'left',
		slots: {
			default: 'otherExpenses'
		},
		visible: true,
		field: 'otherExpenses',

		minWidth: 150
	},
	{
		title: '签约人',
		align: 'left',
		slots: {
			default: 'signEmpId'
		},
		visible: true,
		required: true,
		rule: (row) => row.signEmpId,
		field: 'signEmpId',

		minWidth: 250
	},
	{
		title: '补充说明',
		align: 'left',
		slots: {
			default: 'input'
		},
		visible: true,
		field: 'addExplanation',

		minWidth: 150
	},
	{
		title: '操作',
		minWidth: 200,
		align: 'center',
		// fixed: 'right',
		visible: true,
		slots: {
			default: 'action'
		}
	}
])

export const filterColumnList = [
	'emergencyType',
	'emergencyName',
	'emergencyPhone',
	'togetherList',
	// 'rentFreeDay',
	// 'freeRange',
	'otherExpenses',
	'addExplanation'
].map(key => ({ value: key, label: columnList.find(item => item.field === key)?.title }))
export const selectOptionsConfig = {
	depositMonth: mortgageMonthList,
	periodMonth: periodMonthList,
	cycleType: waningMoonList,
	payPatternValue: Array(32)
		.fill(0)
		.map((_, i) => ({ label: i, value: i })),
	emergencyType: relationshipList,
	certificationType: Object.keys(certificationType).map(e => ({ label: certificationType[e], value: Number(e) })),
	payPattern: paymentMethodList
}
